// 引入react
import * as React from 'react';
import {StyleSheet, View, Text, ScrollView, Dimensions, TouchableOpacity} from 'react-native';
import {SafeAreaView} from 'react-native-safe-area-context';
import AllStyle from '../../../../style';
import {HeaderTitle} from '../../../../componet/settingComponent/HeaderTitle';
import {BottomButton} from '../../../../componet/settingComponent/BottomButton';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import {deleteFaceDatabase, getOneUserFaceByUserId} from '../../../../api/facedatabase';
import {Loading} from '../../../../utils/Loading';
import {Toast} from '../../../../utils/Toast';
import {isAuth} from '../../../../storage/permissions';

/**
 * @Description:人脸录入
 * @author TangYong
 * @date 2023/3/13
 */
export class FaceRecord extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            userId:this.props.route.params.userId==null?null:this.props.route.params.userId,
            faceRecordlist:[],
            user:{
                faceDatabaseEntity:{
                    status:null
                }
            },
            ShowDelBtn:false,//删除按钮
        };
    }

    //生命周期：组件挂载后
   async componentDidMount() {
        //console.log(this.props.route.params,'userid');
       let ShowDelBtn=await isAuth('ad:facedatabase:deleteByUserId')
       this.setState({ShowDelBtn})
       this.init();
    }

    componentDidUpdate(oldProps) {
        // 比较前后props
        if (this.props.route.params != oldProps.route.params) {
            this.init()
        }

    }
    del=()=>{
        Loading.show()
        deleteFaceDatabase(this.state.userId).then(res=>{

            Loading.hidden();
            //console.log(JSON.stringify(res));
            this.init()

        }).catch(err=>{
            Toast.showWarning(err.toString())
            Loading.hidden()

        }).finally(()=>{
            Loading.hidden()
        })
    }
    init=()=>{
        Loading.show()
        //查询单个用户人脸库信息及人脸修改记录
        getOneUserFaceByUserId(this.state.userId).then(res=>{
           // let {}=res;
            let {faceRecordlist,user}=res.data
            if (user.faceDatabaseEntity==null){
                user.faceDatabaseEntity={
                    status: null};
            }
            this.setState({user: user})
            this.setState({faceRecordlist})

            console.log(JSON.stringify(res));
        }).catch(err=>{
            Loading.hidden();
            Toast.showWarning(err.toString())
        }).finally(()=>{
            Loading.hidden()
        })
    }
    entry = () => {
        this.goto('faceDetection',{title:'人脸录入',userId:this.state.user.userId})
    };
    //方法
    back = () => {
        // const route = {
        //     name: this.props.route.params.routePathName,
        //     params: {
        //         //Name: this.state.Name,
        //     },
        // };
        //
        // this.props.navigation.navigate(route);
        this.props.navigation.goBack()
    };
    goto = (name, params) => {

        const route = {
            name: name,
            params: {
                routePathName: this.props.route.name,
                ...params,
            },

        };
        this.props.navigation.navigate(route);
    };
    //DOM
    render() {
        return (
            <SafeAreaView edges={['top', 'left', 'right', 'bottom']} style={{flex: 1, backgroundColor: '#FFF'}}>
                <View style={AllStyle.container}>
                    <HeaderTitle goBack={() => this.back()} headtitle={this.props.route.params.title}></HeaderTitle>
                    <ScrollView style={{padding: 15}}>
                        <View style={[style.body, {marginTop: 40, marginBottom: 40}]}>
                            {this.state.user.faceDatabaseEntity.status==null&& <Text style={{color: '#777B83'}}>
                                人脸暂未录入
                            </Text>}
                            {this.state.user.faceDatabaseEntity.status==1&& <Text style={{color: '#777B83'}}>
                                人脸已录入
                            </Text>}
                            {this.state.user.faceDatabaseEntity.status==2&& <Text style={{color: '#777B83'}}>
                                待管理员审核
                            </Text>}
                            {this.state.user.faceDatabaseEntity.status==0&& <Text style={{color: '#777B83'}}>
                                审核不通过
                            </Text>}

                        </View>
                        <View style={style.body}>
                            <Icon name={'face-recognition'} color={'#0089FD'} size={120}></Icon>
                        </View>
                        <View style={[style.body, {marginTop: 40, marginBottom: 40}]}>
                            <Text>
                                {this.state.user.username}
                            </Text>
                        </View>
                        <View>
                            <Text style={{color: '#777B83'}}>人脸录入记录</Text>
                            {
                                this.state.faceRecordlist&&this.state.faceRecordlist.map((item,index)=>{
                                return <View key={item.id} style={style.modifyRecord}>
                                    <Text style={style.modifyRecordTime}>{item.updateDate}</Text>
                                    <Text>{item.updateExplain}</Text>
                                </View>
                                 })
                            }
                            {
                                this.state.faceRecordlist.length==0&&
                                <View style={style.modifyRecord}>
                                    <Text>暂无录入记录</Text>
                                </View>

                            }


                        </View>

                    </ScrollView>
                </View>
                {
                    this.state.ShowDelBtn&&

                <>
                {!(this.state.user.faceDatabaseEntity.status==null||this.state.user.faceDatabaseEntity.status==0)&&  <TouchableOpacity style={{paddingTop: 10}} onPress={() => {
                    this.del();
                }}>
                    <Text style={style.del}>删除人脸信息</Text>
                </TouchableOpacity>
                }
                </>
                }
                <BottomButton click={() => this.entry()} title={this.state.user.faceDatabaseEntity.status==null?'录入':'重新录入'}></BottomButton>
            </SafeAreaView>
        );
    }

}

const width = Dimensions.get('window').width;
const style = StyleSheet.create({
    //样式
    body: {
        width: width - 30,
        justifyContent: 'center',
        flexDirection: 'row',
    },
    modifyRecordTime: {
        color: '#0089FD',
    },
    modifyRecord: {
        marginTop: 15,
        paddingLeft: 15,
    },
    del: {
        //backgroundColor:'red',
        borderColor: '#ECEEEF',
        borderWidth: 1,
        marginLeft: 10,
        marginRight: 10,
        borderRadius: 10,
        textAlign: 'center',
        // display: 'flex',
        // alignItems: 'center',
        // justifyContent: 'center',
        color: '#FB5F2D',
        fontSize: 16,
        paddingTop: 10,
        paddingBottom: 10,
        paddingRight: 15,

    },

});
